<!-- @format -->

<template>
	<div class="ma-content-block  p-4" style="position:relative;">
		
		<!-- CRUD 组件 -->
		<ma-crud :options="options" :columns="columns" ref="crudRef">
			<template #dept_id="{ record }">
				<div color="blue">{{ record?.dept?.name }}</div>
			</template>
			<template #operationBeforeExtend="{ record }">
				<!-- <a-link @click="watehouseRuku(record)"  v-auth="['warehouse:order:rkmx']"><icon-list />入库明细</a-link> -->
				<!--  -->
				<a-link @click="watehouseRecord(record)" v-auth="['warehouse:userDetail:ccmx']">仓储明细</a-link>
			</template>
			<template #summaryCell="{ column, record, rowIndex }">
				{{ column.dataIndex == "dept_id" ? "合计" : record[column.dataIndex] }}
			</template>
		</ma-crud>
		<!-- 侧边滑动 -->
		<transition>
			<div class="p-4 hudong" v-show="isShow"  style="height:calc(100vh - 110px);overflow:auto">
				<userDetail ref="userDetailRef" @handlecolse="handlecolse"></userDetail>
			</div>
		</transition>

	</div>
</template>
<script setup>
	import { ref, reactive,onMounted,onActivated } from "vue";
	import warehouseUser from "@/api/warehouse/warehouseUser";
	import { Message } from "@arco-design/web-vue";
	import tool from "@/utils/tool";
	import * as common from "@/utils/common";
	import userDetail from "@/views/warehouse/userDetail/index.vue";
	import userDetailRuku from "@/views/warehouse/userDetail/index_ruku.vue";
	const crudRef = ref();
	const visibleRecord = ref(false);
	const visibleRecordRuku = ref(false);
	const userDetailRef = ref();
	const userDetailRukuRef = ref();
	const is_shuaxin = ref(false)
	const isShow = ref(false)
	onMounted(()=>{
		// isShow.value = false
	})
	onActivated(() => {
		if(is_shuaxin.value){
			crudRef.value.refresh()
		}
		
	})
	const handlecolse = (e)=>{
		isShow.value = !isShow.value
	}
	const watehouseRecord = (currentRow) => {
		isShow.value = !isShow.value;
		setTimeout(()=>{
			userDetailRef.value.open(currentRow);
		},200)
	};
	const watehouseRuku = (currentRow) => {
		userDetailRukuRef.value.open(currentRow);
		visibleRecordRuku.value = true;
	};

	const options = reactive({
		id: "flyos_warehouse_user",
		// rowSelection: {
		// 	showCheckedAll: true,
		// },
		pk: "id",
		// bordered: { cell: true },
		// // bordered:true,
		operationColumn: true,
		// operationWidth: 400,
		// operationColumnAlign:'center',
		// operationColumnWidth: 300,
		api: warehouseUser.getList,
		recycleApi: warehouseUser.getRecycleList,
		// add: {
		// 	show: false,
		// 	api: warehouseUser.save,
		// 	auth: ["warehouse:user:save"],
		// },
		// edit: {
		// 	show: false,
		// 	api: warehouseUser.update,
		// 	auth: ["warehouse:user:update"],
		// },
		// delete: {
		// 	show: false,
		// 	api: warehouseUser.deletes,
		// 	auth: ["warehouse:user:delete"],
		// 	realApi: warehouseUser.realDeletes,
		// 	realAuth: ["warehouse:user:realDeletes"],
		// },
		// recovery: {
		// 	show: false,
		// 	api: warehouseUser.recoverys,
		// 	auth: ["warehouse:user:recovery"],
		// },
		// import: {
		// 	show: false,
		// 	url: "warehouse/user/import",
		// 	templateUrl: "warehouse/user/downloadTemplate",
		// 	auth: ["warehouse:user:import"],
		// },
		// export: {
		// 	show: false,
		// 	url: "warehouse/user/export",
		// 	auth: ["warehouse:user:export"],
		// },
		afterRequest: (params) => {
			params.map((v, i) => {
				v.weight = (v.weight - 0).toFixed(3)
			});
			is_shuaxin.value = true
		},
	});

	const columns = reactive([
		{
			title: "",
			dataIndex: "id",
			formType: "input",
			addDisplay: false,
			editDisplay: false,
			hide: true,
			commonRules: {
				required: true,
				message: "请输入",
			},
		},

		{
			title: "公司名称",
			dataIndex: "dept_id",
			formType: "select",
			search: true,
			dict: {
				// 远程通用接口请求，新版代码生成都有一个 remote 接口
				remote: "system/dept/remote",
				// 指定组件接收的props
				props: { label: "name", value: "id" },
				// 开启分页
				openPage: false,
				// 远程请求配置项
				remoteOption: {
					// 按用户名排序
					sort: { id: "desc" }, // 如果不指定排序方式，默认为正序排序
					// 设置查询的字段
					select: ["id", "name"],
					// 设置数据过滤
					filter: {
						type: ["=", 2],
						status: ['=',1]
					},
					// 关联模型
					relations: [],
				},
			},
		},
		
		
		{
			title: "品名总件数",
			dataIndex: "number",
			formType: "input",
		},
		{
			title: "品名总重量",
			dataIndex: "weight",
			formType: "input",
		},
		{
			title: "创建时间",
			dataIndex: "created_at",
			formType: "date",
			search: false,
			addDisplay: false,
			editDisplay: false,
			hide: true,
			sortable: {
				sortDirections: ["ascend", "descend"],
				sorter: true,
			},
			showTime: true,
		},
		{
			title: "更新时间",
			dataIndex: "updated_at",
			formType: "date",
			addDisplay: false,
			editDisplay: false,
			hide: true,
			showTime: true,
		},
		{
			title: "删除时间",
			dataIndex: "deleted_at",
			formType: "date",
			addDisplay: false,
			editDisplay: false,
			hide: true,
			showTime: true,
		},
		{
			title: "创建者",
			dataIndex: "created_by",
			formType: "input",
			addDisplay: false,
			editDisplay: false,
			hide: true,
		},
		{
			title: "更新者",
			dataIndex: "updated_by",
			formType: "date",
			addDisplay: false,
			editDisplay: false,
			hide: true,
			showTime: true,
		},
	]);
</script>
<style scoped>
    .hudong{
		width:100%;
		height:100%;
        background: #fff;
		border-radius:8px;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
		box-sizing:border-box;
		position:absolute;
		top:0;
		left:0px;
		z-index:200;
    }
    
    .v-enter-active{
        animation: slidein .5s linear;
    }
    .v-leave-active{
        animation: slidein .5s linear reverse;
    }
    @keyframes slidein {
        from{
            transform: translateX(100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>

<script>
	export default { name: "warehouse:user" };
</script>
